<template>
	<view class="container">
		<view class="nav-bar">
			<view class="left">
				<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			</view>
			<view class="title">{{title}}</view>
			<view class="right">
				<u-icon name="reload" size="28" color="#333" @click="refresh"></u-icon>
			</view>
		</view>
		
		<web-view :src="url" @message="handleMessage" @error="handleError"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
				title: '加载中...'
			}
		},
		onLoad(options) {
			if (options.url) {
				this.url = decodeURIComponent(options.url)
			}
			if (options.title) {
				this.title = decodeURIComponent(options.title)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			refresh() {
				// 刷新webview
				const pages = getCurrentPages()
				const page = pages[pages.length - 1]
				page.$vm.url = ''
				setTimeout(() => {
					page.$vm.url = this.url
				}, 100)
			},
			handleMessage(event) {
				console.log('接收到网页消息：', event)
			},
			handleError(event) {
				console.error('网页加载错误：', event)
				uni.showToast({
					title: '加载失败，请检查网络',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			
			.title {
				flex: 1;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin: 0 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			
			.left, .right {
				width: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		web-view {
			flex: 1;
			width: 100%;
		}
	}
</style> 